<template>
	<view class="electronic-fence">
		<view class="card">
			<view class="title">当前被守护人：{{ friendName }}</view>
			<view class="address" @click="choseAddress">{{ address }}</view>
			<view class="unit flex-ac">
				<view :class="[index == activeUnit ? 'active' : '', 'unit-item']" v-for="(item, index) in unit"
					:key="index" @click="changeUnit(index)">
					{{ item }}
				</view>
			</view>
			<view class="distance flex-ac">
				<view :class="[index == activeDistance ? 'active' : '', 'distance-item']"
					v-for="(item, index) in distance" :key="index" @click="changeDistance(index)">
					{{ item }}
				</view>
			</view>
			<view class="submit-box">
				<view class="btn" @click="addGeofence">确定</view>
			</view>
		</view>
		<scroll-view scroll-y>
			<view class="geofence-list">
				<view class="geofence-item" v-for="(item, index) in geofenceList" :key="index">
					<view class="title fw-blod">电子围栏</view>
					<view class="flex-ac-jcsb">
						<view>
							<view class="item-adress">{{ item.address }}</view>
							<view class="item-unit">范围：{{ item.radius }}米</view>
						</view>
						<u-icon size="30" name="trash" color="#f60" @click="deleteGeofence(item, index)"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		geofence_list,
		geofence_delete,
		geofence_setup
	} from "@/common/api/index.js"
	export default {
		data() {
			return {
				friendId: '',
				friendName: '',
				address: '请选择围栏地址',
				unit: ['米', '千米'],
				distance: [100, 200, 500, 1000],
				addressInfo: {
					latitude: '',
					longitude: '',
					address: '',
				},
				activeUnit: 0,
				activeDistance: 0,
				pageInfo: {
					page_no: 1,
					pageSize: 20,
					count: 0
				},
				geofenceList: [],
			}
		},
		onLoad(query) {
			console.log(query);
			this.friendId = query.friend_id;
			this.friendName = decodeURI(query.frind_name);
		},
		onShow() {
			this.getGeofenceList();
		},
		methods: {
			choseAddress() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.addressInfo.latitude = res.latitude;
						that.addressInfo.longitude = res.longitude;
						that.addressInfo.address = res.address;
						that.address = res.name;
					}
				})
			},
			// 获取围栏列表
			async getGeofenceList() {
				let res = await geofence_list({
					...this.pageInfo
				})
				
				if (res.code == 1) {
					this.geofenceList = res.data.lists;
				} else {
					this.showMsg(res.msg)
				}
			},
			// 删除围栏
			async deleteGeofence(item, index) {
				let res = await geofence_delete({
					id: item.id
				})

				if (res.code == 1) {
					// 	this.showMsg('删除成功');
					this.geofenceList.splice(index, 1);
				} else {
					this.showMsg(res.msg)
				}
			},
			// 新增围栏
			async addGeofence() {
				if (!this.addressInfo.latitude || !this.addressInfo.longitude || !this.addressInfo.address) {
					this.showMsg('请选择围栏地址');
					return;
				}

				let radius = this.distance[this.activeDistance];
				if (this.activeUnit == 1) {
					radius = radius * 1000;
				}

				let res = await geofence_setup({
					...this.addressInfo,
					user_id: this.friendId,
					radius: radius,
				})
				if (res.code == 1) {
					this.showMsg('新增成功');
					this.address = '请选择围栏地址';
					this.addressInfo = {
						latitude: '',
						longitude: '',
						address: '',
					};
					this.getGeofenceList();
				} else {
					this.showMsg(res.msg)
				}
			},
			changeUnit(index) {
				if (index == 0) {
					this.distance = [100, 200, 500, 1000];
				} else {
					this.distance = [2, 5, 10, 30];
				}
				this.activeUnit = index;
			},
			changeDistance(index) {
				this.activeDistance = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.electronic-fence {
		position: relative;

		.card {
			border-radius: 20rpx;
			margin: 30rpx;
			background-color: #fff;
			padding: 20rpx;
			box-shadow: 10rpx 10rpx 20rpx #ccc;

			.title {
				margin-bottom: 20rpx;
			}

			.address {
				text-align: center;
				color: #ccc;
				border: 1rpx solid #ccc;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 22rpx;
				margin-bottom: 30rpx;
			}

			.unit {
				margin-bottom: 30rpx;

				.unit-item {
					width: 100rpx;
					height: 44rpx;
					border: 1rpx solid #000;
					border-radius: 10rpx;
					text-align: center;
					line-height: 44rpx;
					margin-right: 10rpx;
				}

				.active {
					color: #f60;
					border: 1rpx solid #f60;
				}
			}

			.distance {
				.distance-item {
					width: 100rpx;
					height: 44rpx;
					border: 1rpx solid #000;
					border-radius: 10rpx;
					text-align: center;
					line-height: 44rpx;
					margin-right: 10rpx;
				}

				.active {
					color: #f60;
					border: 1rpx solid #f60;
				}
			}
		}

		.submit-box {
			margin-top: 40rpx;
			// position: fixed;
			// bottom: 0;
			// width: 100vw;
			// padding-bottom: constant(safe-area-inset-bottom);
			// /* 兼容 iOS<11.2 */
			// padding-bottom: env(safe-area-inset-bottom);

			/* 兼容iOS>= 11.2 */
			.btn {
				text-align: center;
				width: 75%;
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 20rpx;
				margin: 0 auto;
				background-color: #f60;
				color: #fff;
				margin-bottom: 40rpx;
			}
		}

		.geofence-list {
			padding: 0 30rpx;

			.geofence-item {
				border: 1rpx solid #ccc;
				border-radius: 20rpx;
				margin: 30rpx 0;
				padding: 20rpx;
			}
		}
	}
</style>